<!DOCTYPE HTML>
<html>
<head>
  <script type="text/javascript" src="pearlstorage.js" ></script>
  <script type="text/javascript" src="pearlupdate.js" ></script>
  <script type="text/javascript" src="pearldialog.js" ></script>
<style>
html {margin:0px; padding:0px;} 
body { margin:0px; padding:0px; } 
img { margin:0px; padding:0px; border:none;} 
div { margin:0px; padding:0px; }
body {
  /*width:600px;
  overflow-x:hidden;*/
  font-family: verdana; 
  font-size: 10px;  
  padding: 0px;
  margin: 0px;
  opacity: 1;
}

input {
  border: solid 1px #CCC;
  font-family: verdana; 
  font-size: 10px;
}

textarea {
  border: solid 1px #CCC;
  font-family: verdana; 
  font-size: 10px;
  margin-bottom: 5px;
}

textarea:hover {
  background-color: #EEE;  
}

input:hover, input:focus {
  background-color: #EEE;  
}

.off {
  background-color: #F99;
}

.on {
  background-color: #3F9;
}

.exact {
  background-color: #3CF;
}

.partial {
  background-color: #C9F;
}
</style>
</head>
<body>
  <div style="display:block; width: 600px; float: right; padding-top: 4px;">    
    <span style="width: 370px; vertical-align:middle; height: 10px; float: left">    
      <input tabindex=5 style="width: 80px" id="configBtn" type="button" value="Pearls" />
      <!--onclick="javascript:hideUnhideConfig()" /> -->
      <input tabindex=4 style="width: 80px" id="movePrevBtn" type="button" value="Previous" />
      <!--onclick="javascript:myMovePage('prevHilightedNode')" /> -->
      <input tabindex=3 style="width: 80px" id="moveNextBtn" type="button" value="Next" />  
      <!--onclick="javascript:myMovePage('nextHilightedNode')" />    -->
      <input tabindex=8 style="width: 20px" id="pos" type="text" value="0" />    
      <span  id="loaded" style="opacity: 0; width: 50px; vertical-align:middle; height: 10px; background-color: red; color: white; font-weight: bold; ">
        Pearls Saved
      </span>
    </span>  
    <span style="width: 200px; vertical-align:middle; height: 10px; float: right">
      <input tabindex=6 style="width: 80px" id="exactBtn" type="button" />
      <!--onclick="javascript:turnExactPartial()" />-->
      <input tabindex=7 style="width: 80px" id="toggleBtn" type="button" />
      <!--onclick="javascript:turnOnOff()" />-->
    </span>
  </div>
  <div id="wordsConfig" style="display:block; width: 600px; float: right; padding-top: 10px; ">
    <span style="width: 120px; vertical-align:middle; height: 50px; float: left">
      This page pearls: 
    </span>
    <span style="width: 480px; height: 50px; float: right">
      <textarea tabindex=1 style="width: 480px; height: 50px;" id="localpearls" type="text">
      </textarea>
       <!--onfocus="javascript:cursorend(this)" onkeydown="javascript:inputkeypressed(event,this)" onchange="javascript:mystorePearls('localpearls')" >-->
    </span>
    <span style="width: 600px; height: 5px; float: right">
    </span>
    <span style="width: 120px; vertical-align:middle; height: 50px; float: left">
      This domain pearls: 
    </span>
    <span style="width: 480px; height: 50px; float: right">
      <textarea tabindex=1 style="width: 480px; height: 50px;" id="domainpearls" type="text" >
      </textarea>
      <!--onfocus="javascript:cursorend(this)" onkeydown="javascript:inputkeypressed(event,this)" onchange="javascript:mystorePearls('domainpearls')" ></textarea>-->
    </span>
    <span style="width: 600px; height: 5px; float: right">
    </span>
    <span style="width: 120px; vertical-align:middle; height: 50px; float: left">
      Every page pearls: 
    </span>
    <span style="width: 480px; height: 50px; float: right">
      <textarea tabindex=2 style="width: 480px; height: 50px;" id="globalpearls" type="text" >
      </textarea>
      <!--onfocus="javascript:cursorend(this)" onkeydown="javascript:inputkeypressed(event,this)" onchange="javascript:mystorePearls('globalpearls')" ></textarea>-->
    </span>
    <div id="wordsFound" style="display:none; width: 600px; float: right; padding-top: 10px; ">
      <span style="width: 120px; vertical-align:middle; height: 50px; float: left">
        Pearls found:
      </span>
      <span style="width: 480px; height: 50px; float: right">
        <div style="width: 480px; " id="pearlsFound" ></div>
      </span>
    </div>
  </div>
</body>
</html>